<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">

      <template #operationBeforeExtend="{ record }">


        <a-link @click="handleNestedClick(record)" status="warning">
          <template #icon>
            <icon-location />
          </template>
          导航路径
        </a-link>
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch :checked-value="1" unchecked-value="2" @change="changeStatus($event, record.id)"
          :default-checked="record.status == 1" />
      </template>
    </ma-crud>
    <a-drawer :visible="nestedVisible" @ok="handleNestedOk" @cancel="handleNestedCancel" unmountOnClose :width="580">
      <template #title>
        导航路径
      </template>
      <Steps v-if="state.dayRecory.length > 0" :data="state.dayRecory" :Index="5"
        :current_position="current_position" />
    </a-drawer>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import systemDeviceCase from '@/api/system/systemDeviceCase'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import commonApi from '@/api/common'
import Steps from '@/views/components/ma-steps/index.vue'
const nestedVisible = ref(false);
const crudRef = ref()
const props = defineProps(["client", "curDevieInfo"]);
const defaultDay = reactive({
  dayRecory: [
    {
      id: 7204928,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: null,
      createTime: "大同路",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-01-04",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-01-05",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 1
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    }
  ],
})
const state = reactive({
  dayRecory: []
});

onMounted(() => {

  //加载地图列表
  //  commonApi.getDeviceMapList().then( res => {

  //   res.success && Message.success(res.message)
  // }).catch( e => { console.log(e) } )


})
const numberOperation = (newValue, id, numberName) => {
  systemDeviceCase.numberOperation({ id, numberName, numberValue: newValue }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}

const switchStatus = (statusValue, id, statusName) => {
  systemDeviceCase.changeStatus({ id, statusName, statusValue }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}

const handleNestedClick = (record) => {
  nestedVisible.value = true;
  commonApi.getPositionList({ device_num: record.device_num, case_id: record.id, pageSize: 500 }).then(res => {
    if (res.success && res.data.items.length > 0) {
      state.dayRecory = res.data.items
    } else {
      state.dayRecory = defaultDay.dayRecory
    }
    console.log(state.dayRecory);
    res.success && Message.success("获取巡航点位成功")
  }).catch(e => { console.log(e) })
};
const handleNestedOk = () => {
  nestedVisible.value = false;
};
const handleNestedCancel = () => {
  nestedVisible.value = false;
}
const options = reactive({
  beforeRequest: params => {
    // 指定排序字段为浏览量字段
    params.device_num = props.curDevieInfo.device_num

    // 指定排序字段为浏览量字段
    params.orderBy = 'id'
    // 指定降序排序
    params.orderType = 'desc'

  },
  id: 'system_device_case',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: systemDeviceCase.getList,
  recycleApi: systemDeviceCase.getRecycleList,
  add: {
    show: true,
    api: systemDeviceCase.save,
    auth: ['system:deviceCase:save']
  },
  edit: {
    show: true,
    api: systemDeviceCase.update,
    auth: ['system:deviceCase:update']
  },
  delete: {
    show: true,
    api: systemDeviceCase.deletes,
    auth: ['system:deviceCase:delete'],
    realApi: systemDeviceCase.realDeletes,
    realAuth: ['system:deviceCase:realDeletes']
  },
  recovery: {
    show: true,
    api: systemDeviceCase.recoverys,
    auth: ['system:deviceCase:recovery']
  },
  import: {
    show: true,
    url: 'system/deviceCase/import',
    templateUrl: 'system/deviceCase/downloadTemplate',
    auth: ['system:deviceCase:import']
  },
  export: {
    show: true,
    url: 'system/deviceCase/export',
    auth: ['system:deviceCase:export']
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {

    title: "巡逻方案",
    dataIndex: "case_name",
    formType: "input",
    search: true,
    commonRules: [{
      required: true,
      message: "请输入"
    }]
  },
  {
    title: '状态', dataIndex: 'auto_nav', width: 100, search: true, formType: 'radio',
    dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
    addDefaultValue: '1', labelWidth: '86px'
  },
  {

    title: "开始日期",
    dataIndex: "start_date",
    formType: "date",
    search: false,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {

    title: "结束日期",
    dataIndex: "end_date",
    formType: "date",
    search: false,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "开始时间",
    dataIndex: "start_time",
    formType: "time",
    search: false,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "结束时间",
    dataIndex: "end_time",
    formType: "time",
    search: false,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {

    title: "应用地图",
    dataIndex: "map_name",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入"
    },
    dict: { url: 'system/common/getDeviceMapList?device_num=' + props.curDevieInfo.device_num, props: { label: 'map_name', value: 'map_name' } }
  },
  {
    title: "设备编号",
    dataIndex: "device_num",
    formType: "input",
    search: false,
    addDisplay: false,
    editDisplay: false,
    addDefaultValue: props.curDevieInfo.device_num,
    editDefaultValue: props.curDevieInfo.device_num,
    hide: true

  },
  {
    title: "所属点位",
    dataIndex: "point_id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "所属区域",
    dataIndex: "dept_id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])
</script>
<script>export default { name: 'system:deviceCase' } </script>